<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/ydui/ydui.rem.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/css/main.css">
    <!-- 引入rem自适应类库 -->
    <script src="static/ydui/ydui.flexible.js"></script>
</head>
<body>
<div id="app" v-cloak style="height:100%;background-color: #fff;">
    <yd-layout>
    	
    	<yd-navbar slot="navbar" title="我的">
        </yd-navbar>

        <div style="height: 1.8rem;position: relative;background-color: #37b9c7;color: #ffffff;margin: 0.2rem;border-radius: 0.1rem;box-shadow: 2px 2px 2px #888888;">
            <div style="float: left;">
                <img :src="headimg" style="width: 1.2rem;border-radius: 0.8rem;margin: 0.3rem;"/>
            </div>
            <div style="float: left;overflow: hidden;margin: 0.4rem 0.4rem 0.4rem 0;">
                <div style="font-size: 0.4rem;font-weight: 600;line-height: 0.6rem;">{{username}}</div>
                <div style="font-size: 0.3rem;line-height: 0.4rem;">{{formatPhone}}</div>
            </div>
        </div>

        <yd-cell-group>
            <yd-cell-item arrow type="a" :href="'account-manage.html?phone=' + phone">
                <span slot="left" style="font-weight: 600;">账号管理</span>
            </yd-cell-item>
            <yd-cell-item arrow type="a" href="center-protocol.html">
                <span slot="left" style="font-weight: 600;">用户协议</span>
            </yd-cell-item>
            <yd-cell-item arrow type="a" href="about-us.html">
                <span slot="left" style="font-weight: 600;">关于我们</span>
            </yd-cell-item>
            <yd-cell-item arrow type="a" href="contact-us.html">
                <span slot="left" style="font-weight: 600;">联系客服</span>
            </yd-cell-item>
        </yd-cell-group>

        <yd-tabbar slot="tabbar" bgcolor="#f5f5f5" active-color="#37b9c7">
            <yd-tabbar-item title="TOKEN" link="index.html" type="a">
                <yd-icon name="home" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="商城" link="mall.html" type="a">
                <yd-icon name="shopcart" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="我的" link="center.html" type="a" active>
                <yd-icon name="ucenter" slot="icon"></yd-icon>
            </yd-tabbar-item>
        </yd-tabbar>

    </yd-layout>
</div>
<!-- 引入 Vue -->
<script src="static/lib/vue.min.js"></script>
<script src="static/lib/jquery.min.js"></script>
<script src="static/lib/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<!-- 引入组件库 -->
<script src="static/ydui/ydui.rem.js"></script>
<script src="static/js/common.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            phone:''
            ,formatPhone:''
            ,username:''
            ,mediaUrl:'https://oxtoken.io/media/'
            ,headimg:'static/image/avtor.jpg'
        },
        created:function () {
            $.getJSON(baseURL + "/api/v1/user", function(r){
                vm.phone = r.mobile;
                vm.formatPhone = vm.mobileFormat(vm.phone);
                vm.username = r.name;
                if(r.img.length != 0){
                    vm.headimg = vm.mediaUrl + r.img;
                }
            });
        },
        methods: {
            mobileFormat: function (str) {
                var seg1 = str.substring(0,3);
                var seg2 = str.substring(3,7);
                var seg3 = str.substring(7,11);

                return seg1 + '-' + seg2 + '-' + seg3;
            }
        }
    });
</script>
</body>
</html>